<template>
	<view class="centerXY betweenY">
		<image :src="path" mode="widthFix"></image>

		<!-- #ifdef H5 -->
		<view @click="downImg" class="mar-top-24">
			<image class="download2" src="../../static/image/download2.png"></image>
			<view class="mar-top-16 font-28 color-grey ">保存海报</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view @click="saveImage" class="mar-top-24">
			<image class="download2" src="../../static/image/download2.png"></image>
			<view class="mar-top-16 font-28 color-grey ">保存海报</view>
		</view>
		<!-- #endif -->

		<l-painter useCORS class="hide" :board="poster" isCanvasToTempFilePath @success="path = $event" hidden />
	</view>
</template>

<script>
	import {
		shareUrl
	} from '@/config/url.js'
	export default {
		name: "share",
		props: {
			data: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				path: '',
				poster: {}
			};
		},
		created() {
			this.getdata();
		},
		methods: {
			// app 保存图片
			saveImage() {
				let _this = this
				if (this.is_save) return
				uni.saveImageToPhotosAlbum({
					filePath: this.path,
					success() {
						_this.is_save = true
						_this.posterShow = false
						_this.$base.tips('保存成功', 'success', false)
					}
				})
			},
			// 下载图片
			downImg() {
				this.isInvitation = true;
				let url = this.path
				this.download_files(url, `分享图片`, {
					showMessage: false
				})
			},
			// h5 下载图片
			download_files(url, fileName, msgConfig = {}) {
				const {
					showMessage = true, success = '导出成功！', error = '导出失败！'
				} = msgConfig
				return new Promise((resolve, reject) => {
					const xhr = new XMLHttpRequest()
					xhr.onreadystatechange = function() {
						if (xhr.readyState === 4) {
							// 响应成功 并且 响应文件类型不能是html (url不存在的话会下载html文件)
							if (xhr.status === 200 && !xhr.response.type.includes('htm')) {
								xhr.onload = function(e) {
									const blob = xhr.response
									if ('msSaveOrOpenBlob' in navigator) {
										window.navigator.msSaveOrOpenBlob(blob, fileName)
									} else {
										const a = document.createElement('a')
										a.download = fileName
										a.href = URL.createObjectURL(blob)
										a.click()
									}
									showMessage && Message.success(success)
									resolve()
								}
							} else {
								reject()
							}
						}
					}
					xhr.open('GET', url, true)
					xhr.responseType = 'blob'
					xhr.send()
				}).catch(() => { // 错误处理
					showMessage && Message.error(error)
				})
			},
			getdata() {
				this.poster = {
					css: {
						width: "612rpx",
						height: "870rpx",
						background: "#FFFFFF",
						borderRadius: '16rpx',
					},
					views: [{
						css: {
							boxSizing: "border-box",
							width: "612rpx",
							height: "844rpx",
						},
						views: [{
								src: this.data.cover,
								type: "image",
								css: {
									borderRadius: '16rpx',
									width: "612rpx",
									height: "612rpx",
								},
							},
							{
								css: {
									boxSizing: "border-box",
									width: "612rpx",
									padding: "24rpx 32rpx",
									display: 'flex',
									alignItems: 'center'
								},
								views: [{
										css: {
											boxSizing: "border-box",
											width: "368rpx",
											marginRight: '20rpx'
										},
										views: [{
												views: [{
													type: 'text',
													text: '￥',
													css: {
														width: "28rpx",
														fontSize: '24rpx',
														color: "#232744",
														marginTop: '25rpx',
													}
												}, {
													type: 'text',
													text: this.data.price,
													css: {
														fontSize: '48rpx',
														color: "#232744",
														fontWeight: '700'
													}
												}]
											},
											{
												type: 'text',
												text: this.data.name,
												css: {
													width: "368rpx",
													marginTop: '8rpx',
													fontSize: '28rpx',
													marginBottom: '12rpx',
													color: "#232744"
												},
											}, {
												css: {
													boxSizing: "border-box",
													width: "368rpx",
												},
												views: [{
													src: this.data.issuer_info.avatar,
													type: "image",
													css: {
														borderRadius: '50%',
														width: "36rpx",
														height: "36rpx",
													},
												}, {
													type: 'text',
													text: this.data.issuer_info.name,
													css: {
														fontSize: '26rpx',
														marginLeft: '10rpx'
													},
												}]
											},
											{
												type: 'text',
												text: `${this.data.issuer_info.name},为交易而生`,
												css: {
													width: "368rpx",
													marginTop: '8rpx',
													fontSize: '24rpx',
													color: '#7a7a7a'
												},
											},
										]
									},
									{
										type: 'qrcode',
										text: shareUrl + '/#' + this.data.url,
										css: {
											background: '#FFFFFF',
											boxSizing: "border-box",
											borderRadius: '6rpx',
											width: '160rpx',
											height: '160rpx',
										}
									},
								]
							}
						],
					}]

				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.hide {
		opacity: 0;
	}

	.download2 {
		display: block;
		width: 92rpx;
		height: 92rpx;
	}
</style>